<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Movobel</title>
<link href="style.css" rel="stylesheet" type="text/css" />

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" />

<script src="js/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript">
	$(function(){
	  $('.slider1').bxSlider({
		displaySlideQty: 7,
		moveSlideQty: 1,
		prevText: '',
		nextText: ''
	  });
	
	$('.input_data').datepicker($.datepicker.regional['pt-br']);
	});	
</script>

<script>
	$(document).ready( function() {
$('.iconemenu').hover(
    function() {
        $(this).animate({ 'zoom': 1.1 }, 2);
    },
    function() {
        $(this).animate({ 'zoom': 1 }, 2);
    });
});

</script>

<script type="text/javascript">
	//*//*//*//*//*//*//*
	
	$(function(){

	var height = $(window).height();
	var width  = $(window).width();
	
	$(window).resize(function(){
		var height = $(window).height();
		var width  = $(window).width();
			
		$(".preto_light-relacionado").css("height", height + "px");
		$(".preto_light-relacionado").css("width", width + "px");
		
	});
	
		$(".preto_light-relacionado").css("height", height + "px");
		$(".preto_light-relacionado").css("width", width + "px");
		
	
	$(window).resize(function(){
		var height = $(window).height();
		var width  = $(window).width();
		
		var meio_h =  height/2 - $(".corpoform").height()/2;
		var meio_w =  width/2 - $(".corpoform").width()/2;
		
		$(".corpolight-relacionado").css("left", meio_w + "px");
		$(".corpolight-relacionado").css("top",  meio_h + "px");
		
	});
	
	var meio_h = height/2 - $(".corpoform").height()/2;
	var meio_w =  width/2 - $(".corpoform").width()/2;
	
	$(".corpolight-relacionado").css("left", meio_w + "px");
	$(".corpolight-relacionado").css("top",  meio_h + "px");
	
	
	
	$(".relacionadointe a").click(function(){
		
		$(".preto_light-relacionado").fadeIn(200);
		$(".corpolight-relacionado").delay(200).fadeIn(300);
		
	});
	
	
		
	
	$(".preto_light-relacionado").click(function(){
			
		$(".preto_light-relacionado").fadeOut();
		  $(".corpolight-relacionado").fadeOut();
		
	});
	
	
	});
	
	
	//*//*//*//*//*//*//*
	
		//*//*//*//*//*//*//*
	
	$(function(){

	var height = $(window).height();
	var width  = $(window).width();
	
	$(window).resize(function(){
		var height = $(window).height();
		var width  = $(window).width();
			
		$(".preto_light-relacionado2").css("height", height + "px");
		$(".preto_light-relacionado2").css("width", width + "px");
		
	});
	
		$(".preto_light-relacionado2").css("height", height + "px");
		$(".preto_light-relacionado2").css("width", width + "px");
		
	
	$(window).resize(function(){
		var height = $(window).height();
		var width  = $(window).width();
		
		var meio_h =  height/2 - $(".corpoform").height()/2;
		var meio_w =  width/2 - $(".corpoform").width()/2;
		
		$(".corpolight-relacionado2").css("left", meio_w + "px");
		$(".corpolight-relacionado2").css("top",  meio_h + "px");
		
	});
	
	var meio_h = height/2 - $(".corpoform").height()/2;
	var meio_w =  width/2 - $(".corpoform").width()/2;
	
	$(".corpolight-relacionado2").css("left", meio_w + "px");
	$(".corpolight-relacionado2").css("top",  meio_h + "px");
	
	
	
	$(".relacionadocor a").click(function(){
		
		$(".preto_light-relacionado2").fadeIn(200);
		$(".corpolight-relacionado2").delay(200).fadeIn(300);
		
	});
	
	
		
	
	$(".preto_light-relacionado2").click(function(){
			
		$(".preto_light-relacionado2").fadeOut();
		  $(".corpolight-relacionado2").fadeOut();
		
	});
	
	
	});
	
	
	//*//*//*//*//*//*//*
	
</script>

</head>

<body>
<div class="head">
	<div class="logo"></div>
    <div class="buttons">
   	    	<div class="bt1-padrao">Meus Dados</div>
            <div class="bt1-padrao2">Suporte</div>
            <div class="bt2-padrao">Sair</div>
   	 
            
   	 
    </div>
    <div class="clear"></div>
  <div class="menu">
    	<div class="slider1">
        
        <div class="iconemenu">
        <img src="imagens/home.png" width="99" height="99" />
        <div class="nomeicone">Home</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/pagina-inicial.png" width="99" height="99" />
        <div class="nomeicone">Páginas</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-menu.png" width="99" height="99" />
        <div class="nomeicone">Menu Principal</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-banner.png" width="99" height="99" />
        <div class="nomeicone">Banners</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-frete.png" width="99" height="99" />
        <div class="nomeicone">Frete</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-fabricante.png" width="99" height="99" />
        <div class="nomeicone">Fabricantes</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-cupom.png" width="99" height="99" />
        <div class="nomeicone">Cupons</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-categoria.png" width="99" height="99" />
        <div class="nomeicone">Categorias</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-produtos.png" width="99" height="99" />
        <div class="nomeicone">Produtos</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-clientes.png" width="99" height="99" />
        <div class="nomeicone">Clientes</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-compras.png" width="99" height="99" />
        <div class="nomeicone">Compras</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-relatorio.png" width="99" height="99" />
        <div class="nomeicone">Relatorios</div>
        </div>
        
        <div class="iconemenu">
        <img src="imagens/icon-admin.png" width="99" height="99" />
        <div class="nomeicone">Administradores</div>
        </div>
   	    
         
            
        </div>
    </div>
</div>
<div class="conteudo">

<div class="preto_light-relacionado"></div>
<div class="corpolight-relacionado">
	<div class="titulo-box">Relacionado de interesse</div>
    <div class="titulos-box">
    	<div class="textos-boxes">Produto: </div>
        	<div class="space-box"></div>
        <div class="textos-boxes">Categoria: </div>
        	<div class="space-box"></div>
    </div>
    <div class="boxes">
   		<div class="campo-box"><input type="text" /></div>
        	<div class="space-box"></div>
        <div class="campo-box"><input type="text" /></div>
        	<div class="space-box"></div>
        </div>
	<div class="enviar-box"><a href="#"><img src="imagens/salvar2.png" width="135" height="40" /></a></div>
<!--corpolight-->	
</div>

<div class="preto_light-relacionado2"></div>
<div class="corpolight-relacionado2">
	<div class="titulo-box">Relacionado de cor</div>
    <div class="titulos-box">
    	<div class="textos-boxes">Produto: </div>
        	<div class="space-box"></div>
        <div class="textos-boxes">Categoria: </div>
        	<div class="space-box"></div>
    </div>
    <div class="boxes">
   		<div class="campo-box"><input type="text" /></div>
        	<div class="space-box"></div>
        <div class="campo-box"><input type="text" /></div>
        	<div class="space-box"></div>
        </div>
	<div class="enviar-box"><a href="#"><img src="imagens/salvar2.png" width="135" height="40" /></a></div>
<!--corpolight-->	
</div>


  <div class="filtro-produtos">
    Filtrar por: 	
    <select name="selectionField"> 
      <option value="categoria" >Categoria</option>
      <option value="nome" >Nome</option>
      <option value="data" >Data</option>
    </select>
    </div>
  <div class="busca">
    <input type="text" />
    <div class="bt-busca"><img src="imagens/bt-busca.png" width="79" height="26" /></div>
    </div>
    <select name="selectionField"> 
      <option value="categoria" >Dia</option>
      <option value="nome" >01</option>
      <option value="data" >02</option>
    </select>
    
    <select name="selectionField"> 
      <option value="categoria" >Mes</option>
      <option value="nome" >01</option>
      <option value="data" >02</option>
    </select>
    
    <select name="selectionField"> 
      <option value="categoria" >Ano</option>
      <option value="nome" >01</option>
      <option value="data" >02</option>
    </select>
    	<div class="clear"></div>
   
   	<div class="produto">
    	<div class="foto-produto"></div>
        <div class="info-produto">
        Lente Eles, marca HEUHEUEH  9,3 graus<br />
        Destaque: Sim<br />
        Desconto: 0%<br />
        Preço: R$ 160,00 por: R$ 160,00<br />
        Lançamento: 2013-05-07<br />
        Quantidades: 4<br />
        </div>
        
        <div class="pedido-completo">
   	    <img src="imagens/pedido-completo.png" width="154" height="49" />
        </div>
        
        <div class="msg">
        <img src="imagens/enviar-msgy.png" width="137" height="49" />
        </div>
        
        <div class="opcoes">
        <div class="codigo">
        Código<br /><br />

		#132123
        </div>
        <div class="status">
        Status <br /><br />
		2 etapa pendente
        </div>       
        <div class="opcoes-bt">
        Opções<br />
        <a href="#"><img src="imagens/editary.png" width="59" height="21" /></a><br />
            <a href="#"><img src="imagens/apagar.png" width="59" height="21" /></a>
        </div>
        </div>
        
      
        
    </div>

    <div class="clear"></div>
<!--conteudo-->
</div>

<div class="rodape">
    	<img src="imagens/rodape_center.jpg" width="1000" height="73"  />
</div>
</body>
</html>
